import React from 'react';
import styles from '@/assets/css/coupon-info.module.css';
import type business from '@/typeof/type';

const Info = () => {

    const [ searchParams ] = useSearchParams();
    const [ cid, SetCid ] = useState(searchParams.get('cid') ?? '');
    const [ CouponInfo, SetCouponInfo ] = React.useState<any>({
        rate: '0'
    });
    const [ NoticeList, SetNoticeList ] = React.useState([]);
    const [ business ] = useState<business>(React.business);

    useEffect(() => 
    {
        GetCouponInfoData();
    }, []);

    // 获取详细
    const GetCouponInfoData = async () => {
        // 组装数据
        const params = {
            busid: business.id,
            cid: cid
        }

        // 请求数据
        const result = await React.Http.post('/coupon/info',params);

        if(result.code === 1)
        {
            SetCouponInfo(result.data.coupon)
            SetNoticeList(result.data.receive)
        }
    }

    // 领取优惠卷
    const CouponReceive = async () => {

        const res = await React.UI.Dialog.confirm({
            content: '是否确认领取优惠卷'
        });

        if(!res) return false;

        if(Object.getOwnPropertyNames(business).length <= 0)
        {
            React.fail('请先登录', () => React.navigate('/business/login'))
            return false
        }

        let result = await React.Http.post('/coupon/receive', {
            busid: business.id,
            cid: cid
        })

        if(result.code == 0)
        {
            React.fail(result.msg)
            return false
        }
        else
        {
            GetCouponInfoData()
            React.success(result.msg)
        }
    }

    return(
        <>
            <React.UI.Image src={CouponInfo.thumb_text} height={213} fit='cover' />

            <React.UI.Swiper
                autoplay={true}
                autoplayInterval={3000}
                loop={true}
                indicator={() => false}
                direction='vertical'
                style={{ '--height': '40px', 'border': '0px' }}
            >
                {
                    NoticeList.map((item:any) =>{
                        return(
                            <React.UI.Swiper.Item key={item.id}>
                                <React.UI.NoticeBar
                                    style={{ 'border': '0px' }}
                                    content={item.business.mobile_text + '已领取'}
                                    color='info'
                                />
                            </React.UI.Swiper.Item>
                        )
                    })
                }
            </React.UI.Swiper>

            <div className={styles.coupon_detail}>
                <div className={styles.coupon_info}>
                    <div className={styles.left}>
                        <div className={styles.left_top}>
                            <div>
                                <span>{parseFloat(CouponInfo.rate) * 100}</span>折
                            </div>
                            <div className={styles.top_info}>
                                <div>优惠券</div>
                                <div>COUPON</div>
                            </div>
                        </div>
                    </div>
                    <div className={styles.receive}>
                        {CouponInfo.receive ? (
                            <React.UI.Button size="small" disabled color='primary'>已领取</React.UI.Button>
                        ) : (
                            <React.UI.Button color="primary" onClick={CouponReceive}>领取</React.UI.Button>
                        )}
                    </div>
                </div>
                <div className={styles.coupon_prompt}>
                    <div className={styles.prompt_title}>温馨提示：</div>
                    <div><span>•</span>开始时间：{CouponInfo.createtime_text}</div>
                    <div><span>•</span>结束时间：{CouponInfo.endtime_text}</div>
                    <div><span>•</span>领取仅限量 {CouponInfo.total} 张，赶快领取！ </div>
                </div>
            </div>
        </>
    )
}

export default Info;